<template>
  <div class="mui-content ">
    <heade background='' title='更换绑定' v-on:goBack="goBack($event)"></heade>
    <form class="loginContent" >
      <div class="wrapper-user">
        <div class="mui-icon"><img src="../assets/img/phone(2).png" alt=""></div>
        <input type="text" placeholder="输入手机号" v-model="userName" MAXLENGTH="11">
      </div>
      <div class="wrapper-user wrapper-user2">
        <div class="mui-icon  "><img src="../assets/img/yanzhengma.png" alt=""></div>
        <input type="password" placeholder="请输入验证码" v-model="password" class="input">
        <button type="button" :disabled="disabled" class='phoneRegist' @click="checkPhone" >{{btntxt}}</button>
      </div>
      <div class="bind mui-text-center" @click="onSubmit">
        确认更换
      </div>

    </form>
    <Prompt
      title="错误"
      :msg=mistakeMsg
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    ></Prompt>
  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import  Prompt from '@components/common/Prompt.vue'
  export default {
    components:{
      heade,
      Prompt
    },
    data(){
      return {
        mistake:false,
        UserId:'',
        userName:'',
        password:'',
        time:0,
        btntxt:"获取验证码",
        disabled:false,
        mistakeMsg:'',
        OrganCode:'',
        DeviceCode:'',
        OpenId:''
      }
    },
    created(){
    },
    methods:{
      confirm1(){
        this.mistake=false
      },
      checkPhone(){
        let phone =this.userName;
        let reg=11 && /^[1]([0-9])[0-9]{9}$/;
        if(phone==''){
          this.mistake=true;
          this.mistakeMsg='请输入手机号！'
        }else if(!reg.test(phone)){
          this.mistake=true;
          this.mistakeMsg='手机号格式不正确！'
        } else{
          this.time=60;
          this.disabled=true;
          this.timer();
         /*===============获取验证码接口*/
          let me=this;
          me.$Global.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              UserId:me.$Global.UserId ,
              action: "SMSCode",
              name: "Vue_CourseResource",
              Data: {
                OrganCode: me.OrganCode,
                Telephone: me.userName
              }
            },
            callback: me.cb_registCode,
            Scope:me,
          });
        }
      },
      timer() {

        if (this.time > 0) {
          this.time--;
          this.btntxt=this.time+"s后重新获取";
          setTimeout(this.timer, 1000);
        } else{
          this.time=0;
          this.btntxt="获取验证码";
          this.disabled=false;
        }
      },
      onSubmit(){
        let me=this;
        if(me.phoneCode!=''){
          me.$Global.zcServer.Post({
            IsNeedLogin:'true',
            Paras:{
              Name:'Vue_CourseResource',
              Action:'ReBind',
              UserId:me.$Global.UserId,
              Data:{
                OrganCode:me.$Global.OrganCode,
                DeviceCode:me.$Global.DeviceCode,
                OpenId:me.$Global.UserId,
                Telephone:me.userName,
                CheckCode:me.password
              }
            },
            Callback:me.Callback_GetOpenId,
            Scope:me
          });

        }else {
          me.mistake=true;
          me.mistakeMsg="请输入验证码"
        }
      },
      Callback_GetOpenId(resJson,scope){
        console.log('绑定返回');
        console.log(resJson);
        if(resJson.success){
          localStorage.setItem('myPhone',this.userName);
          this.$router.push('/Resource')
        }else{
          this.mistake=true;
          this.mistakeMsg=resJson.msg
        }
      },
      goBack(){
        this.$router.go(-1)
      },
      /*回调函数*/
      cb_registCode(resJson,scope){
console.log(resJson)
      }

    }



  }
</script>
<style scoped>
  .mui-content  .loginContent{

    width: 96%;
    margin-left: 2%;

  }
  .mui-content  .loginContent .wrapper-user{
    margin-top: 10px;
    height: 40px;
    width: 100%;
    display: flex;
    background-color: white;
    border-bottom: 1px solid gainsboro;
  }
  /*.mui-content  .loginContent .wrapper-user2{*/
    /*margin-top: 10px;*/
  /*}*/
  .mui-content  .wrapper-user .mui-icon{
    margin: 8px 0px 0px 20px;
    /*color: rgb(170,204,252);*/
    width: 5%;
    background-color: white;
  }
  .mui-content  .wrapper-user .mui-icon img{
    width: 1rem;
    height: 1.2rem;
    /*margin: 0.1rem 0rem 0rem 0.1rem;*/
  }

  .mui-content  .wrapper-user input{
    height: 39px;
    width: 63%;
    border: none;
    outline: none;
  }
  .mui-content  .wrapper-user button{
    width: 32%;
    margin-top: 4px;
    right: 10px;
    background-color:rgba(93, 194, 240, 1);
    border-radius: 70px;
    color: white;
    height: 32px;
    line-height: 22px;
    border: none;
    /*padding: 0rem 2rem;*/
  }

  .mui-content .loginContent .bind{
    width: 100%;
    height: 40px;
    background-color:rgba(93, 194, 240, 1);
    /*border-radius: 40px;*/
    color: white;
    margin:  auto;
    line-height: 40px;
    margin-top: 30px;
    border: none;
    border-radius: 4px
  }

</style>
